Vue 3 中 v

又回到了经典的一句话：“知其然，而后使其然”。相信大家对 Vue 提供 v-if 和 v-show 指令的使用以及对应场景应该都滚瓜烂熟了。但是，我想仍然会有很多同学对于 v-if 和 v-show 指令实现的原理存在知识空白。

所以，今天就让我们来一起了解一番 v-if 和 v-show 指令实现的原理～

在之前 【Vue3 源码解读】从编译过程，理解静态节点提升 一文中，我给大家介绍了 Vue 3 的编译过程，即一个模版会经历 baseParse、transform、generate 这三个过程，最后由 generate 生成可以执行的代码（render 函数）。

我们可以直接在 Vue3 Template Explore 输入一个使用 v-if 指令的栗子：

然后，由它编译生成的 render 函数会是这样：

可以看到，一个简单的使用 v-if 指令的模版编译生成的 render 函数最终会返回一个三目运算表达式。首先，让我们先来认识一下其中几个变量和函数的意义：

显然，如果当 visible 为 false 的时候，会在当前模版中创建一个注释节点（也可称为占位节点），反之则创建一个真实节点（即它自己）。例如当 visible 为 false 时渲染到页面上会是这样：

那么，这个时候我想大家就会抛出一个疑问：当 visible 动态切换 true 或 false 的这个过程（派发更新）究竟发生了什么？

在 Vue 3 中总共有四种指令：v-on、v-model、v-show 和 v-if。但是，实际上在源码中，只针对前面三者进行了特殊处理，这可以在 packages/runtime-dom/src/directives 目录下的文件看出：

而针对 v-if 指令是直接走派发更新过程时 patch 的逻辑。由于 v-if 指令订阅了 visible 变量，所以当 visible 变化的时候，则会触发派发更新，即 Proxy 对象的 set 逻辑，最后会命中 componentEffect 的逻辑。

这里，我们来看一下 componentEffect 的定义（伪代码）：

可以看到，当组件还没挂载时，即第一次触发派发更新会命中 !instance.isMounted 的逻辑。而对于我们这个栗子，则会命中 else 的逻辑，即组件更新，主要会做三件事：

总体来看，v-if 指令的实现较为简单，基于数据驱动的理念，当 v-if 指令对应的 value 为 false 的时候会预先创建一个注释节点在该位置，然后在 value 发生变化时，命中派发更新的逻辑，对新旧组件树进行 patch，从而完成使用 v-if 指令元素的动态显示隐藏。

同样地，对于 v-show 指令，我们在 Vue 3 在线模版编译平台输入这样一个栗子：

那么，由它编译生成的 render 函数：

此时，这个栗子在 visible 为 false 时，渲染到页面上的 HTML：

从上面的 render 函数可以看出，不同于 v-if 的三目运算符表达式，v-show 的 render 函数返回的是 _withDirectives() 函数的执行。

前面，我们已经简单介绍了 _openBlock() 和 _createBlock() 函数。那么，除开这两者，接下来我们逐点分析一下这个 render 函数，首当其冲的是 vShow ～

_vShow 在源码中则对应着 vShow，它被定义在 packages/runtime-dom/src/directives/vShow。它的职责是对 v-show 指令进行特殊处理，主要表现在 beforeMount、mounted、updated、beforeUnMount 这四个生命周期中：

对于 v-show 指令会处理两个逻辑：普通 v-show 或 transition 时的 v-show 情况。通常情况下我们只是使用 v-show 指令，命中的就是前者。

普通 v-show 情况，都是调用的 setDisplay() 函数，以及会传入两个变量：

接着，我们来看一下 setDisplay() 函数的定义：

setDisplay() 函数正如它本身命名的语意一样，是通过改变该元素的 CSS 属性 display 的值来动态的控制 v-show 绑定的元素的显示或隐藏。

并且，我想大家可能注意到了，当 value 为 true 的时候，display 是等于的 el.vod，而 el.vod 则等于这个真实元素的 CSS display 属性（默认情况下为空）。所以，当 v-show 对应的 value 为 true 的时候，元素显示与否是取决于它本身的 CSS display 属性。

withDirectives() 顾名思义和指令相关，即在 Vue 3 中和指令相关的元素，最后生成的 render 函数都会调用 withDirectives() 处理指令相关的逻辑，将 vShow 的逻辑作为 dir 属性添加到 VNode 上。

withDirectives() 函数的定义：

首先，withDirectives() 会获取当前渲染实例处理边缘条件，即如果在 render 函数外面使用 withDirectives() 则会抛出异常：

然后，在 vnode 上绑定 dirs 属性，并且遍历传入的 directives 数组，而对于我们这个栗子 directives 就是：

显然此时只会迭代一次（数组长度为 1）。并且从 render 传入的 参数可以知道，从 directives 上解构出的 dir 指的是 _vShow，即我们上面介绍的 vShow。由于 vShow 是一个对象，所以会重新构造（bindings.push()）一个 dir 给 VNode.dir。

VNode.dir 的作用体现在 vShow 在生命周期改变元素的 CSS display 属性，而这些生命周期会作为派发更新的结束回调被调用。

相信大家应该都知道 Vue 3 提出了 patchFlag 的概念，其用来针对不同的场景来执行对应的 patch 逻辑。那么，对于上面这个栗子，我们会命中 patchElement 的逻辑。

而对于 v-show 之类的指令来说，由于 Vnode.dir 上绑定了处理元素 CSS display 属性的相关逻辑（ vShow 定义好的生命周期处理）。所以，此时 patchElement 中会为注册一个 postRenderEffect 事件。

这里我们简单分析一下 queuePostRenderEffect 和 invokeDirectiveHook：

到这里，我们已经围绕 v-Show 介绍完了 vShow、withDirectives、postRenderEffect 等概念。但是，万事具备只欠东风，还缺少一个调用 postRenderEffect 事件的时机，即处理 pendingPostFlushCbs 队列的时机.

在 Vue 3 中 effect 相当于 Vue 2.x 的 watch。虽然变了个命名，但是仍然保持着一样的调用方式，都是调用的 run() 函数，然后由 flushJobs() 执行 effect 队列。而调用 postRenderEffect 事件的时机则是在执行队列的结束。

flushJobs 函数的定义：

在 flushJobs() 函数中会执行三种 effect 队列，分别是 preRenderEffect、renderEffect、postRenderEffect，它们各自对应 flushPreFlushCbs()、queue、flushPostFlushCbs。

那么，显然 postRenderEffect 事件的调用时机是在 flushPostFlushCbs()。而 flushPostFlushCbs() 内部则会遍历 pendingPostFlushCbs 队列，即执行之前在 patchElement 时注册的 postRenderEffect 事件，本质上就是执行：

相比较 v-if 简单干脆地通过 patch 直接更新元素，v-show 的处理就略显复杂。这里我们重新梳理一下整个过程：

v-if 和 v-show 原理，你可以用一两句话概括，也可以用一大堆话概括。如果牵扯到面试场景下，我更欣赏后者，因为这说明你研究的够深以及理解能力够强。并且，当你了解一个指令的处理过程后，对于其他指令 v-on、v-model 的处理，相信也可以很容易的得出结论。最后，如果文中存在表达不当或错误的地方，欢迎各位同学提 Issue~